<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html ng-app="LeaderboardApp">
<head>
<meta charset="UTF-8">
<title>Consulta de Cumplimiento de Metas Globales por Farmacia</title>
<link href="/Leaderboard/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/Leaderboard/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
<link href="/Leaderboard/css/select2.css" rel="stylesheet" type="text/css"/>
<link href="/Leaderboard/css/select2-bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="/Leaderboard/css/styles.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="/Leaderboard/js/lib/bootstrap/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/Leaderboard/js/lib/bootstrap/respond.min.js"></script>
<script type="text/javascript" src="/Leaderboard/js/lib/bootstrap/bootstrap.min.js"></script>

<!--[if lt IE 9]><script type="text/javascript" src="/Leaderboard/js/lib/angularjs/html5shiv-printshiv.min.js"></script><![endif]-->
<!--[if lt IE 8]><script type="text/javascript" src="/Leaderboard/js/lib/angularjs/json3.min.js"></script><![endif]-->

<script type="text/javascript" src="/Leaderboard/js/lib/select2.min.js"></script>
<script type="text/javascript" src="/Leaderboard/js/lib/angularjs/angularjs-1.2.16.min.js"></script>
<script type="text/javascript" src="/Leaderboard/js/controllers.init.js"></script>
<script type="text/javascript" src="/Leaderboard/js/controllers.admin.js"></script>
<script type="text/javascript" src="/Leaderboard/js/controllers.proyecciones.js"></script>

<!--[if lte IE 8]>
<script type="text/javascript">
    $(document).ready(function() {
        angular.bootstrap(document);
    });
</script>
<![endif]-->
</head>
<body>
	<div ng-include="'/Leaderboard/include/header.html'"></div>
	
	<div class="container">
		<div ng-include="'/Leaderboard/include/changePassword.html'"></div>
		
		<div ng-controller="proyeccionesCtrl" ng-init="setAdminPage(false); getMesesProyecciones(); getSupervisores();">
			<div ng-include="'/Leaderboard/include/messages.html'"></div>
			
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title" ng-hide="isVistaDetalle">Consulta de Cumplimiento de Metas Globales por Farmacia</h3>
					<h3 class="panel-title" ng-show="isVistaDetalle">Detalle de Metas Globalesl para Sucursal {{detalleProyeccionSucursal.branchName}}</h3>
				</div>
				<div class="panel-body panel-body-scrollable">
					<div class="span12 centered-pills">
						<ul class="nav nav-pills">
							<li ng-class="classForMes(mes)" ng-repeat="mes in mesesProyecciones"><a ng-click="setCurrentMes(mes); getProyecciones();" href="javascript:void(0);">{{mes.label}}</a></li>
						</ul>
					</div>
					
					<form role="form" class="form-horizontal">
						<div class="form-group">
							<label class="col-sm-3 control-label">Seleccionar supervisor</label>
							<div class="col-sm-6">
								<select ng-change="getProyecciones()" ng-options="sup.name + '(' + sup.user + ')' for sup in supervisores" ng-model="supervisor" class="form-control ng-pristine ng-valid" name="supervisores" id="cmbSupervisores"></select>
							</div>
						</div>
					</form>
					
					<table id="tblProyeccionesGeneral" class="table table-striped table-condensed table-bordered" ng-table="tableParams" ng-hide="isVistaDetalle">
						<thead><tr><th>Mes</th>
							<th ng-class="classActiveIf('Supervisor')"><a href="javascript:void(0);" ng-click="toggleSort('Supervisor')">Supervisor<i ng-class="classForSortType()" ng-show="isSortActive('Supervisor')"></i></a></th>
							<th>Farmacia</th><th>Meta</th><th>Venta acumulada</th><th>Proyección de Ventas</th>
							<th ng-class="classActiveIf('Tendencia')"><a href="javascript:void(0);" ng-click="toggleSort('Tendencia')">Tendencia <i ng-class="classForSortType()" ng-show="isSortActive('Tendencia')"></i></a></th><th>Acciones</th></tr></thead>
						<tbody>
							<tr ng-repeat="proyeccion in proyeccionesSucursales | filter:filterText">
								<td>{{proyeccion.mes}}</td>
								<td>{{proyeccion.supervisor}}</td>
								<td>{{proyeccion.branchId}} - {{proyeccion.branchName}}</td>
								<td>$ {{proyeccion.meta}} </td>
								<td>$ {{proyeccion.ventaAcumulada}}</td>
								<td>$ {{proyeccion.proyeccionVentas}}</td>
								<td ng-class="classForProyeccion(proyeccion.tendencia)">
									<div class="progress progress-sucursal">
									  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="{{proyeccion.tendencia}}" aria-valuemin="0" aria-valuemax="100" style="width: {{proyeccion.tendencia}}%">
									    <span class="sr-only">{{proyeccion.tendencia}}% Complete</span>
									    <span class="shadow-text">{{proyeccion.tendencia}}%</span>
									  </div>
									</div>
								</td>
								<td><a class="link float-left" ng-show="proyeccion.id > 0" ng-click="detalleProyeccionesSucursal(proyeccion)" href="javascript:void(0);">Ver detalle</a></td>
							</tr>
						</tbody>
					</table>
					
					<table id="tblDetalleProyeccion" class="table table-striped table-condensed table-bordered" ng-table="tableParams" ng-show="isVistaDetalle">
						<thead>
							<tr>
								<th>&nbsp;</th><th colspan="3" class="wrap-center">&Uacute;ltimos 3 meses</th>
								<th colspan="2" class="wrap-center">A&ntilde;o anterior</th>
								<th class="wrap-center">Mes actual</th>
							</tr>
							<tr>
								<th>&nbsp;</th>
								<th>{{detalleProyeccionSucursal.month3.label}}</th><th>{{detalleProyeccionSucursal.month2.label}}</th><th>{{detalleProyeccionSucursal.month1.label}}</th>
								<th>{{detalleProyeccionSucursal.year2.label}}</th><th>{{detalleProyeccionSucursal.year1.label}}</th>
								<th>{{detalleProyeccionSucursal.month.label}}</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Venta</td>
								<td>$ {{detalleProyeccionSucursal.month3.sales}}</td><td>$ {{detalleProyeccionSucursal.month2.sales}}</td><td>$ {{detalleProyeccionSucursal.month1.sales}}</td>
								<td>$ {{detalleProyeccionSucursal.year2.sales}}</td><td>---</td>
								<td>$ {{detalleProyeccionSucursal.month.sales}}</td>
							</tr>
							<tr>
								<td>Cumplimiento</td>
								<td>{{detalleProyeccionSucursal.month3.value}} %</td><td>{{detalleProyeccionSucursal.month2.value}} %</td><td>{{detalleProyeccionSucursal.month1.value}} %</td>
								<td>{{detalleProyeccionSucursal.year2.value}} %</td><td>{{detalleProyeccionSucursal.year1.value}} %</td>
								<td ng-class="classForProyeccion(detalleProyeccionSucursal.month.value)">{{detalleProyeccionSucursal.month.value}} %</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="panel-footer">
					<input id="usrSearch" name="usrSearch" class="form-control search-box" ng-model="filterText" ng-hide="isVistaDetalle" />
					<button type="button" class="btn btn-default" ng-click="getProyecciones();" ng-hide="isVistaDetalle">Refrescar</button>
					<button type="button" class="btn btn-primary" ng-click="regresar();" ng-show="isVistaDetalle">Regresar</button> 
				</div>
			</div>
		</div>
	</div>
</body>
</html>